<!DOCTYPE html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
<head>
	<meta charset='UTF-8'>
	<title>产品列表</title>
	<link rel='stylesheet' href='../../static/css/style.css' th:href='@{http://localhost:8080/css/style.css}'>
	<link rel='stylesheet' href='../../static/layui/css/layui.css'
		  th:href='@{http://localhost:8080/layui/css/layui.css}'>
	<script src='../../static/js/jquery.js'
			th:src='@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}'></script>
	<script src='../../static/layui/layui.js' th:src='@{http://localhost:8080/layui/layui.js}'></script>
	<script src='../../static/js/jQuery.print.js' th:src="@{http://localhost:8080/js/jQuery.print.js}"></script>
	<link rel='stylesheet' href='../../static/css/man/out_storage_list.css'
		  th:href='@{http://localhost:8080/css/man/out_storage_list.css}'>
	<script src='../../static/js/man/out_storage_list.js' th:src='@{http://localhost:8080/js/man/out_storage_list.js}'></script>

</head>
<body>
<div id="print">
	<h1>出库列表</h1>
	<hr>
	<span>请选择订单日期 :</span>
	<input id="warehouse_id" class="out_storage_ipts" type="date">
	<select name="warehouse_id_select" id="warehouse_id_select">
		<option value="0">请选择具体的出库订单</option>
	</select>
	<hr>
	<datalist id="company_data">
		<option th:each="company : ${companies}" th:text="${company}"></option>
	</datalist>

	<input type="text" id="company_ipt" class="out_storage_ipts" list="company_data" placeholder="请选择购买单位">
	<hr>

	<table id="out_storage_table" class="layui-table" lay-filter="out_storage">

	</table>

	<script type="text/html" id="bar">
		<a style="width:60px;" class=" layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius"
		   lay-event="del">删除</a>
	</script>
	<!-- todo: 超级管理员的开关实现  -->
	<script type="text/html" id="manager_bar">
		<div class="layui-input-block">
			<input type="checkbox" name="role" lay-skin="switch">
		</div>
	</script>

	<script>

		var tableProduct;

		$("#variety_ipt").on("change",function (){
			var variety = $(this).val();
			tableProduct.reload({
				url: '/products/findProductsForVariety/', //数据接口
				where:{variety:variety},
				pae:{curr:1}
			})
		})



		$("#warehouse_id_select").on("change", function () {
			var warehouseId = $(this).val();
			tableProduct.reload({
				url: '/products/warehouseIdList/', //数据接口
				where: {warehouseId: warehouseId},
				page: {curr: 1}
			})
		})

		layui.use('table', function () {

			var table = layui.table;

			//第一个实例
			tableProduct = table.render({
				elem: '#out_storage_table',
				url: '/outStorage/outIdList/', //数据接口
				page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['prev', 'page', 'next', 'count', 'skip'] //自定义分页布局
					//,curr: 5 //设定初始在第 5 页
					, groups: 5 //只显示 1 个连续页码
					, limit: 10
				},
				cols: [
					[//表头
						{field: 'id', title: 'ID', sort: true, fixed: 'left' ,	width:'60'	}
						, {field: 'outId', title: '出库编号', sort:true, 	width:'160'	}
						, {field: 'varietyName', title: '产品名称', edit: 'text',    	width:'120'	}
						, {field: 'typeName', title: '型号名称', edit: 'text',  	width:'120'	}
						, {field: 'standardName', title: '规格', edit: 'text',     	width:'160'	}
						, {field: 'price', title: '单价', edit: 'text',   	width:'250'	}
						// , {field: 'contact', title: '联系人', edit: 'text'}
						// , {field: 'telephone', title: '电话', edit: 'text'}
						, {field: 'count', title: '数量', edit: 'text',         	width:'80'	}
						, {field: 'money', title: '金额', edit: 'text',			width:'100'	}
						, {field: 'payCondition', title: '付款条件', edit: 'text',     	width:'100'	}
						, {field: 'transport', title: '运输方式', edit: 'text',			width:'80'	}
					]
				],
			});
		});
	</script>



</div>
<div style=" width: 300px;margin:50px auto 0 auto ;">
	<button class="layui-btn-lg layui-bg-green " id="submit_button">打印出库单</button>
</div>

</body>
</html>